<script setup lang="ts">

import WorkEditScrollTable from "~/components/ai/WorkEditScrollTable.vue";
import WorkEditConfig from "~/components/ai/WorkEditConfig.vue";
import WorkEditRoles from "~/components/ai/WorkEditRoles.vue";
import WorkEditContent from "~/components/ai/WorkEditContent.vue";

const step = ref(0)
const window = ref(0)
watch(step, (newVal) => {
  console.log(newVal)
  window.value = newVal - 1
})
onMounted(() => {
  //自动初始化

})



</script>

<template>
  <v-sheet width="90%" class="mx-auto">
    <v-stepper v-model="step">

      <v-stepper-header>
        <!--      返回主页按钮-->
        <v-btn size="large"  class="mx-2" icon="mdi-home" variant="text" @click="navigateTo(useGlobalConfig.APP.homepage)"></v-btn>
        <v-stepper-item
            title="基本设置"
            value="1"
            editable
            icon="mdi-cog-outline"
        ></v-stepper-item>

        <v-divider color="primary"></v-divider>

        <v-stepper-item
            title="角色管理"
            value="2"
            editable
        ></v-stepper-item>

        <v-divider></v-divider>

        <v-stepper-item
            title="AI文案"
            value="3"
            editable
        ></v-stepper-item>
        <v-divider></v-divider>
        <v-stepper-item
            title="分镜创作"
            value="4"
            editable
        ></v-stepper-item>
      </v-stepper-header>
    </v-stepper>
  </v-sheet>
  <v-window
      v-model="window"
      show-arrows
  >
    <!--    项目设置-->
    <v-window-item
        key="1"
    >
      <work-edit-config/>
    </v-window-item>
    <!--    角色管理-->
    <v-window-item
        key="2"
    >
      <work-edit-roles/>
    </v-window-item>
    <!--    文章编辑-->
    <v-window-item
        key="3"
    >
      <work-edit-content/>
    </v-window-item>
    <!--    项目详细编辑-->
    <v-window-item key="4">
      <WorkEditScrollTable/>
    </v-window-item>
  </v-window>




</template>

<style scoped lang="scss">

</style>